
<div class="w-full space-y-2">
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-stone-800 border-stone-800 text-stone-50">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message, with color="primary"</div>
  </div>
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-stone-200 border-stone-200 text-stone-800">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message, with color="secondary"</div>
  </div>
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-blue-500 border-blue-500 text-blue-50">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message, with color="info"</div>
  </div>
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-green-500 border-green-500 text-green-50">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message, with color="success"</div>
  </div>
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-amber-500 border-amber-500 text-amber-50">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message, with color="warning"</div>
  </div>
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-red-500 border-red-500 text-red-50">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message, with color="error"</div>
  </div>
</div>
